import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:wy/pages/square/banner_slider.dart';
import 'package:wy/pages/square/category.dart';
import 'package:wy/pages/square/header.dart';
import 'package:wy/pages/square/square_list.dart';
import 'package:wy/utils/screen_util.dart';
import 'package:wy/widgets/global_navigation_bar.dart';

const items = [
  {'id': 0, 'title': '推荐', 'color': null},
  {'id': 1, 'title': '官方', 'color': null},
  {'id': 2, 'title': '精品', 'color': 0xffe7aa5a},
  {'id': 3, 'title': '欧美', 'color': null},
  {'id': 4, 'title': '电子', 'color': null},
  {'id': 5, 'title': '流行', 'color': null},
  {'id': 6, 'title': '乡村', 'color': null},
  {'id': 7, 'title': '其他', 'color': null}
];
// 这个数据顺序后面被改变了 所以不能再用 const 按原则说 这个数据应该在这个文件被改变-
var imgLists = [
  {
    'index': 0,
    'title': '请保持没少雀跃，因为有人等你对事',
    'img': 'assets/images/tmp_square_cover_1.png'
  },
  {'index': 1, 'title': '222', 'img': 'assets/images/tmp_square_cover_2.png'},
  {'index': 2, 'title': '333', 'img': 'assets/images/tmp_square_cover_3.png'},
  {'index': 3, 'title': '444', 'img': 'assets/images/tmp_square_cover_1.png'},
  {'index': 4, 'title': '555', 'img': 'assets/images/tmp_square_cover_2.png'},
  {'index': 5, 'title': '666', 'img': 'assets/images/tmp_square_cover_3.png'},
  {'index': 6, 'title': '777', 'img': 'assets/images/tmp_square_cover_1.png'},
];

const listItems = [
  {
    'id': 11,
    'img': 'assets/images/tmp_cover_1.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 12,
    'img': 'assets/images/tmp_cover_2.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 13,
    'img': 'assets/images/tmp_cover_3.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 14,
    'img': 'assets/images/tmp_cover_4.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 15,
    'img': 'assets/images/tmp_cover_5.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 16,
    'img': 'assets/images/tmp_cover_6.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 17,
    'img': 'assets/images/tmp_cover_1.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 18,
    'img': 'assets/images/tmp_cover_2.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 19,
    'img': 'assets/images/tmp_cover_3.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 20,
    'img': 'assets/images/tmp_cover_4.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 21,
    'img': 'assets/images/tmp_cover_5.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
  {
    'id': 22,
    'img': 'assets/images/tmp_cover_6.jpg',
    'title': '钢琴摇滚 | 浪子赠予诗人的一纸情书'
  },
];

class HSquarePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    var args = ModalRoute.of(context).settings.arguments as Map;
    // print(args);
    var screen = Screen(context);
    final categoryID = useState(items[0]['id']);
    // print(args);

    return Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
              ),
            ),
            Container(
                height: screen.calc(600),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xff959a99), Colors.white],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                )),
            Container(
              // 状态栏
              padding: EdgeInsets.only(top: screen.top + screen.calc(7)),
              child: Column(
                children: [
                  HHeader(),
                  HCategory(
                      items: items,
                      value: categoryID.value,
                      onChanged: (val) {
                        categoryID.value = val;
                      }),
                  HBannerSlider(items: imgLists),
                  HSquareList(items: listItems),
                ],
              ),
            )
          ],
        ),
      ),
      bottomNavigationBar: GlobalNavigationBar(
        value: 2,
      ),
    );
  }
}
